<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
		xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="WEB-INF/facelets/template.xhtml">
    <ui:param name="title" value="Test" />
    <ui:define name="content">
	<h1>Test - #{testBean.category.title}</h1>
        <h:form id="questionForm">
	    <div>
		<div class="questionTitle">
		    <h:outputText value="#{testBean.currentQuestion.title}" />
		    <span class="atQuestion">#{testBean.at()}/#{testBean.numQuestions()}</span>
		</div><br />

		<div class='#{testBean.currentQuestion.getImageUri() == null?
			      "questionContainer" : "questionContainerWithImage"}' >
		    <h:selectOneRadio layout="pageDirection" value="#{testBean.selectedAlternative}">
			<c:forEach var="a" items="#{testBean.currentQuestion.alternatives}">
			    <f:selectItem itemLabel="#{a.content}" itemValue="#{a.id}" />
			</c:forEach>
		    </h:selectOneRadio>
		    <h:graphicImage styleClass="questionImage"
				    value="images/#{testBean.currentQuestion.getImageUri()}"
				    alt="Image"
				    rendered="#{testBean.currentQuestion.getImageUri() != null}" />
		</div>

		<br />
		<c:if test="#{testBean.isNotFirstQuestion()}">
		    <p:commandButton action="#{testBean.prev}" styleClass="button"
				     value="Previous" ajax="true" update="questionForm" />
		</c:if>
		<c:if test="#{testBean.isNotLastQuestion()}">
		    <p:commandButton id="nextButton" action="#{testBean.next}" styleClass="button"
				     value="Next" ajax="true" update="questionForm" />	
		</c:if>
		<c:if test="#{testBean.isLastQuestion()}">
		    <p:commandButton id="nextButton" action="#{testBean.next}" styleClass="button"
				     value="Finish" ajax="true" update="questionForm" />	    
		</c:if>
            </div>
	    <div id="error" class="error"><h:outputText value="#{testBean.error}" /></div>
        </h:form>

    </ui:define>
</ui:composition>

